<template>
  <div class="manual-exit-node">
    <el-form label-position="top" label-width="80px" :model="formData" ref='nodeForm'>
      <div class="voice-setting">
        <el-form-item label="语音命令词" prop="voiceCommand" class="voice-form">
          <el-input v-if='formData.voiceCommand' v-model="formData.voiceCommand" disabled></el-input>
          <div v-else class="empty-voice-tips">产品未设置语音命令词，请在产品基本信息中进行编辑。</div>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { onMounted, ref, reactive, nextTick } from '@vue/composition-api'
import { useState } from '@/hooks/useState'

export default {
  name: 'SceneLibManualExitNode',
  components: {
  },
  props: {
    initialForm: {
      required: true
    }
  },
  setup(props, { emit }) {
    const { initialForm } = props
    const nodeForm = ref()
    const paramOpen = ref()
    const showParamOpen = ref(false)
    const formData = reactive({
      activeTrigger: 'close',
      voiceCommand: '',
      openParam: {
        isOpen: false,
        dataType: 'String'
      },
      loopJudgment: true
    })
    const initValue = () => {
      Object.assign(formData, initialForm)
      // 命令词默认值获取
      const productInfo = useState({ productInfo: state => state.product.productInfo }).productInfo
      formData.voiceCommand = productInfo.value.voiceCommandEnd
      nextTick(() => { nodeForm.value.clearValidate() })
    }
    const validateForm = () => {
      return true
    }
    const getFormData = () => {
      return formData
    }

    onMounted(() => {
      initValue()
    })

    return {
      formData,
      showParamOpen,
      nodeForm,
      paramOpen,
      initValue,
      validateForm,
      getFormData
    }
  }
}
</script>

<style lang="scss">

.manual-exit-node {
  .el-form--label-top .multi-choose{
    .el-form-item__content{
      line-height: 19px;
      .el-checkbox-group{
        height: 19px;
      }
    }
  }
  .voice-setting{
    display: flex;
    align-items: flex-end;
    .voice-form{
      flex: 1 0 auto;
    }
    .tool-bar {
      margin: 0 0 8px 22px;
      .signal-open{
        width: 16px;
        height: 32px;
        cursor: pointer;
        margin-left: 24px;
        margin-right: 2px;
        &:nth-child(1) {
          margin-left: 0;
        }
        &.true{
          width: 18px;
          margin-right: 0;
        }
      }
    }
  }
  .empty-voice-tips{
    color: #a3a3a3;
  }
}
</style>
